<template>
  <el-container class="page-main">
    <!-- 1页面左侧导航菜单 -->
    <el-aside class="main-sider">
      <!--<router-link tag="li" class="nav-link" :to="{name:'公司管理'}">-->
      <!--  <a class="list-group-item list-group-item-action">公司管理</a>-->
      <!--</router-link>-->

      <!--<el-menu router unique-opened>-->
      <el-menu router unique-opened
               :collapse="siderState.collapsed" class="main-nav-menu"
               @select="handleSelect">
        <!--<el-submenu index="/system/settings">-->
        <!--  <template #title>-->
        <!--    <el-icon class="el-icon-menu"></el-icon>系统设置-->
        <!--  </template>-->
        <!--  <el-menu-item index="/system/settings/orgn">-->
        <!--    <el-icon class="el-icon-menu" />-->
        <!--    <template #title> 公司管理</template>-->
        <!--  </el-menu-item>-->
        <!--  <el-menu-item index="/system/settings/mgroup">-->
        <!--    <el-icon class="el-icon-menu"/>-->
        <!--    <template #title> 权限组管理</template>-->
        <!--  </el-menu-item>-->
        <!--</el-submenu>-->
        <menu-tree :menuTreeData="menuData"></menu-tree>
        <!--<el-menu-item index="/system/settings/dept">-->
        <!--  <el-icon class="el-icon-menu"/>-->
        <!--  <template #title> 部门管理</template>-->
        <!--</el-menu-item>-->
      </el-menu>
    </el-aside>
    <!-- 2页面主要显示内容 -->
    <!--<RouterView />-->
    <el-main class="main-content">
      <div class="content-header">
        <div>HomeSystem:工具栏</div>
      </div>
      <div class="content-body" ref="contentBodyHeight">
        <!--<div class="module-welcome" v-show="showWelcome">-->
        <!--  <h3>HomeSystem:欢迎Div</h3>-->
        <!--</div>-->
        <router-view />
      </div>
    </el-main>
  </el-container>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, ref } from 'vue';
import MenuTree from '@/components/MenuTree.vue';
import router from '@/router';
import store from '@/store';
import { useRoute } from 'vue-router';

export default defineComponent({
  name: 'HomeSystem',
  components: {
    MenuTree
  },
  setup (props, context) {
    // 1. 定义需要的数据
    // 1.1 asider的状态相关变量
    const siderState = ref({
      collapsed: false,
      collapseIcon: 'el-icon-expand',
      miniWidth: 40,
      width: 256
    });
    // const _menuDataMap = [];
    const menuData = computed(() => {
      return store.state.moduleMenuTree;
    });
    // 1.2 控制主页面显示Welcome还是显示业务内容
    const showWelcome = ref(true);

    // 2. 定义需要的方法
    const handleSelect = (path: any, key: any) => {
      console.log('HomeSystem >>> click on asider menu：', path, key);
      showWelcome.value = false;
      console.log('HomeSystem >>> 点击左侧菜单后的menuData = ', menuData);
    };
    // 3. 页面挂载初始化
    onMounted(() => {
      //
    });
    // 4. 返回需要暴露给页面使用的数据和方法
    return {
      // asider的menu相关
      siderState,
      showWelcome,
      menuData,
      // handleMenuClick,
      // handleMenuOpenChange,
      // 显示welcome还是业务内容
      handleSelect
    };
  }
});
</script>

<style scoped lang="scss">
.page-main {
  .main-sider {
  }
  .main-content {
    .content-header{
    }
    .content-body {
      .module-welcome {
        //width: 1000px;
        //content中有一个按钮，高度=32
        color: blue;
        height: 100%;
        border: 5px solid greenyellow;
        box-sizing: border-box;
      }
    }
  }
}
</style>
